<template>
  <div style="text-align: center">
    <strong>个人信息页</strong>

    <el-form
      :model="userInfo"
      label-width="100px"
      label-position="left"
      style="text-align: left"
      class="demo-userInfo"
    >
      <el-form-item label="用户名：">
        <p class="text">{{ userInfo.userName }}</p>
      </el-form-item>
      <el-form-item label="性别：">
        <p class="text" v-if="userInfo.sex === 0">女</p>
        <p class="text" v-if="userInfo.sex === 1">男</p>
      </el-form-item>
      <el-form-item label="手机号码：">
        <p class="text">{{ userInfo.phone }}</p>
      </el-form-item>
      <el-form-item label="部门名称：">
        <p class="text">{{ userInfo.departmentName }}</p>
      </el-form-item>
      <el-form-item label="职位：">
        <p class="text">{{ userInfo.positionName }}</p>
      </el-form-item>
      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="editUserBtn()"
          >编辑个人信息</el-button
        >
        <el-button type="primary" @click="updatePassBtn()">修改密码</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="编辑个人信息"
      :visible.sync="dialogEditFormVisible"
      width="600px"
      :before-close="editFormHandleClose"
    >
      <el-form
        style="text-align: left"
        :model="editForm"
        :rules="rules"
        ref="editForm"
        label-width="100px"
        label-position="left"
        class="demo-editForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="editForm.userName"
            minlength="5"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="editForm.phone"
            minlength="11"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editFormHandleClose()">取 消</el-button>
        <el-button type="primary" @click="submitForm1('editForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogPassFormVisible"
      width="600px"
      :before-close="passFormHandleClose"
    >
      <el-form
        :model="passForm"
        status-icon
        :rules="rules"
        ref="passForm"
        label-width="100px"
      >
        <el-form-item label="旧密码" prop="currentPass">
          <el-input
            type="password"
            v-model="passForm.currentPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input
            type="password"
            v-model="passForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="passForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('passForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm2('passForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "UserCenter",
  computed: {
    userInfo: {
      get() {
        return this.$store.state.userInfo.info;
      },
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      disable: true,
      dialogEditFormVisible: false,
      dialogPassFormVisible: false,
      editForm: {
        id: -1,
        userName: "",
        sex: 1,
        phone: "",
      },
      passForm: {
        password: "",
        checkPass: "",
        currentPass: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9_-]{5,11}$/,
            message: "只能包含小写字符，数字或特殊符号“ _-”",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        currentPass: [
          { required: true, message: "请输入当前密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    updatePassBtn() {
      this.dialogPassFormVisible = true;
    },
    editUserBtn() {
      this.editForm.id = this.userInfo.id;
      this.editForm.userName = this.userInfo.userName;
      this.editForm.sex = this.userInfo.sex;
      this.editForm.phone = this.userInfo.phone;
      this.dialogEditFormVisible = true;
    },
    editFormHandleClose() {
      this.$refs["editForm"].resetFields();
      this.dialogEditFormVisible = false;
    },
    passFormHandleClose() {
      this.$refs["passForm"].resetFields();
      this.dialogPassFormVisible = false;
    },
    getUserInfo() {
      this.$axios.get("/user/info").then((res) => {
        // console.log(res.data.data);
        this.$store.commit("setUserinfo", res.data.data);
      });
    },
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          this.$axios.post("/user/updateInfo", this.editForm).then((res) => {
            this.$message({
              showClose: true,
              type: "success",
              message: "修改成功!",
              onClose: () => {
                this.getUserInfo();
              },
            });
          });
          this.editFormHandleClose();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          this.$axios.post("/user/resetPassword", this.passForm).then((res) => {
            _this.$alert(res.data.message, "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$refs[formName].resetFields();
                this.$store.commit("resetState");
                this.$router.push("/login");
                location.reload();
              },
            });
          });
          this.passFormHandleClose();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
  // mounted() {
  //   this.timer = window.setInterval(() => {
  //     setTimeout(() => {
  //       this.getUserInfo();
  //     }, 0);
  //   }, 3000);
  // },
  // destroyed() {
  //   window.clearInterval(this.timer);
  // },
};
</script>

<style scoped>
.demo-editForm {
  margin: 0px 30px;
}
.demo-userInfo {
  width: 420px;
  margin: 50px auto;
}
</style>